<template>
  <div class="map_dir">
    <div class="masks" v-show="show_right" @click="dismisMenu"></div>
    <div class="monitor_type_sel" v-show="show_right">
      <h4>监测类型</h4>
      <ul>
        <li :class="{ on: change[0] }" @click="choicemenu(0)">户外燃气泄漏预警</li>
        <li :class="{ on: change[1] }" @click="choicemenu(1)">户外沼气预警</li>
        <li :class="{ on: change[2] }" @click="choicemenu(2)">户内燃气泄漏预警</li>
      </ul>
    </div>
   <!-- <h3 class="title" v-if="!detailTit">
      <span class="back" @click="back"></span>地图分布
    </h3> -->
   <!-- <h3 class="title" v-else>
      <span class="back" @click="originalLocation"></span>监测详情
    </h3> -->
    <div class="map_box">
      <div id="container" class="container"></div>
      <div class="map_search">
        <i class="iconfont iconsousuo"></i>
        <input
          type="text"
          placeholder="搜地点、查设备、找窨井"
          v-model="searchKey"
          @input="requestgetmap()"
          @keyup.enter="requestgetmap()"
        />
      </div>

      <div class="monitor_type" ref="monitorType" @click="showRight">
        <img src="../assets/images/monitor_type_icon.png" style="width:.4rem" />
      </div>
      <div
        v-if="bottomshow"
        id="detailId"
        class="detail_wrap"
        :class="{ 'detail-tit': detailTit }"
      >
        <div ref="detailInner">
          <gasAlarmInfo :infos="detailinfos" ref="alarmInfo" :alarmType="alarmType" :detailTit.sync='detailTit'></gasAlarmInfo>
          <div class="wranning_btn">
            <button @touchstart.prevent="feedback" v-if="!detailinfos[0].alarmFellBackTO">预警反馈</button>
            <button  class="disButton" v-if="detailinfos[0].alarmFellBackTO">预警反馈</button>
            <button @touchstart.prevent="wDisposal">预警处置</button>
            <button @touchstart.prevent="process">流程处置</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import gasAlarmInfo from "./gasAlarmInfo";
import MapTool from "@/js/MapTool.js";
let maptools;
export default {
  name: "map1",
  mounted() {
    (this.userId = this.$route.query.userId),
      (this.alarmid = this.$route.query.alarmId);
    let _this = this;
    window["dsBridge"].register("GoBack", function() {
      _this.back();
    });
    window["dsBridge"].register("whetherHtml", function(ret) {
      console.log("=======ret:" + ret);
      return true;
    });
    // console.log(`this.domHig:${this.domHig}`);
    this.init();
    this.requestgetmap();
    // this.addMarker();
    this.setType();
  },
  components: {
    // monitorCurve,
    gasAlarmInfo
  },
  data() {
    return {
      bottomshow: false,
      domHig: 0,
      detailHig: 190,
      detailInner: 0,
      detailTit: false,
      show_right: false,
      zoom: 11,
      searchKey: "",
      change: [false, false, false],
      center: [117.25, 31.83],
      listIcon: [],
      startY: 0,
      startX: 0,
      EndTime: 0,
      userId: 0,
      alarmid: [],
      maxmarker: {},
      detailinfos: [],
      alarmType: 0
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    handleTouchStart(event) {
      this.touchStatus = !this.touchStatus
	  this.detailTit = !this.detailTit
    },
    handleTouchMove(e) {
      let that = this;
      
    },
    handleTouchEnd() {
      this.EndTime = new Date().getTime();
      this.touchStatus = false;
    },
    originalLocation() {
      this.detailHig = 190;
      this.detailTit = false;
    },
    // 预警反馈
    feedback() {
      var _this = this;
      console.log(
        "-------alarmId" + _this.$refs.alarmInfo.getSelectedAlarmId()
      );
      this.$router.push({
        name: "feedback",
        query: {
          userId: _this.$route.query.userId,
          alarmType:_this.alarmType,
          alarmId: _this.$refs.alarmInfo.getSelectedAlarmId()
        }
      });
    },
    // 预警处置
    wDisposal() {
      var _this = this;
      this.$router.push({
        name: "disposal",
        query: {
          userId: _this.$route.query.userId,
          alarmId: _this.$refs.alarmInfo.getSelectedAlarmId()
        }
      });
    },
    //流程处置
    process() {
      var _this = this;
      this.$router.push({
        name: "warningProcess",
        query: {
          userId: _this.$route.query.userId,
          alarmId: _this.$refs.alarmInfo.getSelectedAlarmId()
        }
      });
    },
    showRight() {
      this.show_right = this.show_right ? false : true;
    },
    dismisMenu() {
      if (this.show_right) this.show_right = false;
    },
    choicemenu(index) {
      this.change.splice(index, 1, !this.change[index]);
      this.requestgetmap();
    },
    init() {
      maptools = new MapTool([113.12, 23.02]);
    },
    //请求报警坐标
    requestgetmap() {
      this.$LoadView.loading(this);
      let _this = this;
      maptools.clearMapmakers();
      this.listIcon = [];
      var ids = [];
      var data = {};
      if (this.alarmid) {
        data.alarmId = this.alarmid;
      }
      data.searchKey = this.searchKey;
      data.userName = this.$store.state.userInfo.loginName;
      this.change.forEach((item, index) => {
        //执行代码
        if (this.change[index]) {
          var position = index + 1;
          ids.push("" + position);
        }
      });
      data.ids = ids;
      this.$api.reqApi.getmap(data).then(res => {
        this.$LoadView.cancle(this);
        if (res.code === "200") {
          var outdoor = res.data.outdoor;
          var indoor = res.data.indoor;
          outdoor.forEach(outitem => {
            var outdoor_array = [];
            outdoor_array.push(this.getmapItem(outitem, false));
            this.listIcon.push(outdoor_array);
          });
          indoor.forEach(inItem => {
            var indoor_array = [];
            inItem.forEach(alarm => {
              indoor_array.push(this.getmapItem(alarm, true));
            });
            this.listIcon.push(indoor_array);
          });
          this.listIcon.forEach(item => {
            //地图添加聚合
            maptools.addCluster(item, function(e) {
              _this.markerclick(e);
            });
          });
          if (this.listIcon.length != 0) {
            var center = this.listIcon[0][0];
            maptools.setCenter(center.position);
          }
          this.bottomshow = false;
        }
      });
    },

    getmapItem(item, indoor) {
      var object = {};
      object.id = item.alarmId;
      object.position = [item.longtitude, item.latitude];
      if (item.fellBack.indexOf("燃气") != -1) {
        if (item.alarmLevelNum == "1") {
          object.martIcon = 1;
        } else if (item.alarmLevelNum == "2") {
          object.martIcon = 3;
        } else if (item.alarmLevelNum == "3") {
          object.martIcon = 4;
        }
      } else {
        object.martIcon = 2;
      }
      if (indoor) {
        object.martIcon = 0;
      }
      return object;
    },

    getdetaillist(alarmIds) {
      this.$LoadView.loading(this);
      var param = {};
      param.alarmids = alarmIds;
      let _this = this;
      this.$api.reqApi.getdetaillist(param).then(res => {
        this.$LoadView.cancle(this);
        console.log("jjj" + JSON.stringify(res));
        if (res.code === "200") {
          _this.detailinfos = res.data;
          _this.bottomshow = true;
        } else {
          _this.$toast("没有数据");
        }
      });
    },
    markerclick(e) {
      this.detailHig = 190;
      maptools.resumemarker(this.maxmarker);
      let marker = e[0];
      var iconNum = marker.getExtData().martIcon;
      var path = maptools.requireIcons(iconNum);
      let newIcon = new AMap.Icon({
        image: path,
        size: new AMap.Size(50, 50),
        imageSize: new AMap.Size(50, 50)
      });
      marker.setIcon(newIcon);
      this.maxmarker = {};
      this.maxmarker.path = path;
      this.maxmarker.marker = marker;
      maptools.setCenter(marker.getExtData().position);
      let alarmids = [];
      e.forEach(item => {
        alarmids.push(item.getExtData().id);
      });
      this.getdetaillist(alarmids);
    },
    setType() {
      var type = this.$route.query.type;
      switch (type) {
        case "整体情况":
          this.alarmType = 0;
          break;
        case "户外燃气泄漏预警":
          this.alarmType = 1;
          break;
        case "户外沼气预警":
          this.alarmType = 2;
          break;
        case "户内燃气泄漏预警":
          this.alarmType = 3;
          break;
      }
    }
  },
  destroyed() {
    this.$LoadView.cancle(this);
  }
};
</script>

<style lang="stylus" scoped>

::v-deep .wranning_btn .disButton{
  cursor :not-allowed;
  color: #999;
  border: #999 1px solid;

} 
::v-deep .map_pic {
  position: relative;
  width: 30px;
  height: 30px;
}

::v-deep .map_pic_icon {
  width: 40px;
  height: 40px;
}

::v-deep .map_pic_text {
  background: #86c7ff;
  min-width: 10px;
  max-width: 30px;
  height: 13px;
  position: absolute;
  background: red;
  font-size: 10px;
  text-align: center;
  color: white;
  border-radius: 5px;
  margin: 0px;
  top: -5px;
  right: -10px;
  padding-left: 3px;
  padding-right: 3px;
}

.map_dir {
  overfolw: hidden;
  flex: 1;
  height: 100%;
}

.detail_wrap {
  overflow:hidden;
  transition:all .5s;
  height:30vh;
}

.map_box {
  background: rgba(0, 0, 0, 0.5);
  height: calc(100vh);
  margin-top: 0rem;
  position: relative;
  overflow: hidden;
}

.map_search {
  position: absolute;
  left: 0.3rem;
  right: 0.3rem;
  height: 0.67rem;
  background: #fff;
  top: 0.3rem;
  border-radius: 6px;
  z-index: 1;
  box-shadow: 0 3px 10px 3px rgba(0, 0, 0, 0.1);

  i {
    width: 0.6rem;
    text-align: center;
    height: 100%;
    display: inline-block;
    color: #979ea0;
  }

  input {
    width: calc(100% - 0.8rem);
    border: 0;
    height: 100%;
    box-sizing: border-box;
    padding-left: 0.1rem;
  }
}

.monitor_type {
  width: 0.66rem;
  height: 0.66rem;
  background: #fff;
  position: absolute;
  top: 1.58rem;
  right: 0.3rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 9px 3px rgba(0, 0, 0, 0.2);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  height: 100%;
  width: 100%;
}

.monitor_type_sel {
  position: absolute;
  width: 3.83rem;
  background: #fff;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 501;
  padding-left: 0.3rem;
  box-sizing: border-box;

  h4 {
    font-size: 0.33rem;
    color: #2a2c32;
    padding-top: 0.88rem;
  }

  ul {
    margin-top: 0.62rem;
  }

  li {
    height: 0.6rem;
    line-height: 0.6rem;
    padding: 0 0.35rem;
    background: #f1f1f1;
    float: left;
    margin-bottom: 0.5rem;
    border-radius: 0.08rem;

    &.on {
      background: #428ee4;
      color: #fff;
      box-shadow: 0 4px 5px 0px rgba(66, 142, 228, 0.3);
    }
  }
}

.masks {
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 500;
  box-sizing: border-box;
  top: 0;
}

.detail_wrap.detail-tit {
	overflow-y:auto;
	height:70vh !important;
  border-radius: 0;
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0);
}

.detail_wrap {
  position: absolute;
  width: 100%;
  background: #fff;
  bottom: 0;
  left: 0;
  z-index: 200;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
}

.wranning_btn {
  height: 1.19rem;
  border-top: #dde0e4 1px solid;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 0.8rem;
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  z-index: 222;

  button {
    color: #428ee3;
    border: #428ee3 1px solid;
    border-radius: 0.08rem;
    height: 0.56rem;
    width: 1.8rem;
    background: #fff;
    margin-right: 0.2rem;
  }
}
</style>
